import React from 'react'
import {Icon, Menu} from 'antd'
import {Link} from 'react-router-dom'

const Index = props => {
  const { menuData } = props
  return (
    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
      {menuData.map(item => (
        <Menu.SubMenu
          key={item.path}
          title={<span><Icon type={item.icon || "appstore"} /><span>{item.name}</span></span>}
        >
          {item.children.map(subItem => (
            <Menu.Item key={subItem.path}>
              <Link to={subItem.path} replace>
                <Icon type={subItem.icon || "appstore"} />
                {subItem.name}
              </Link>
            </Menu.Item>
          ))}
        </Menu.SubMenu>
      ))}
    </Menu>
  )
}

export default Index
